import React from 'react'
import { Button, Space, Swiper, Toast } from 'antd-mobile'
import { SearchBar, Grid } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import withAuth from '../../hoc/withAuth'
function Index() {

    const navigate = useNavigate()
    const list = ['/images/1.jpg', '/images/2.jpg', 'images/3.jpg', 'images/4.jpg']
    return (
        <div>
            <SearchBar placeholder='请输入内容' onFocus={() => { navigate('/sousuo') }} />
            <Grid columns={4} gap={8}>
                <Grid.Item>
                    <img src="/images/1.jpg" alt="" style={{ width: '20vw', height: '10vh' }} />
                    <div>亲子游</div>
                </Grid.Item>
                <Grid.Item>
                    <img src="/images/1.jpg" alt="" style={{ width: '20vw', height: '10vh' }} />
                    <div>文化游</div>
                </Grid.Item>
                <Grid.Item>
                    <img src="/images/1.jpg" alt="" style={{ width: '20vw', height: '10vh' }} />
                    <div>温泉游</div>
                </Grid.Item>
                <Grid.Item onClick={() => {
                 navigate('/list')
                }}>
                    <img src="/images/1.jpg" alt="" style={{ width: '20vw', height: '10vh' }} />
                    <div>周边游</div>
                </Grid.Item>
                <Grid.Item>
                    <img src="/images/1.jpg" alt="" style={{ width: '20vw', height: '10vh' }} />
                    <div>旅游地图</div>
                </Grid.Item>
                <Grid.Item>
                    <img src="/images/1.jpg" alt="" style={{ width: '20vw', height: '10vh' }} />
                    <div>酒店民宿</div>
                </Grid.Item>
                <Grid.Item>
                    <img src="/images/1.jpg" alt="" style={{ width: '20vw', height: '10vh' }} />
                    <div>汽车票</div>
                </Grid.Item>
                <Grid.Item>
                    <img src="/images/1.jpg" alt="" style={{ width: '20vw', height: '10vh' }} />
                    <div>飞机票</div>
                </Grid.Item>
            </Grid>
            <Swiper>
                {
                    list.map((v, i) => {
                        return <Swiper.Item key={i} style={{ width: '100vw', height: '30vh' }}>
                            <img src={v} alt="" style={{ width: '100vw', height: '30vh' }} />
                        </Swiper.Item>
                    })
                }

            </Swiper>
        </div>
    )
}

export default withAuth(Index)